<template>
    <div>
        <el-tabs type="border-card" :value="pageObj.agreement" @tab-click="tabChangeFn">
            <el-tab-pane label="所有设备" name="all"></el-tab-pane>
            <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
            <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
            <el-form ref="form" :model="pageObj" label-width="80px">
                <el-form-item label="在线状态">
                    <el-select v-model="pageObj.online" placeholder="在线状态">
                        <el-option v-for="(item, index) in option" :label="item.label" :value="item.value"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="EUI">
                    <el-input v-model="pageObj.eui"></el-input>
                </el-form-item>
                <el-form-item label="绑定时间">
                    <el-date-picker v-model="dateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button-group>
                        <el-button size="small" type="primary" icon="el-icon-search" @click="searchFn">搜索</el-button>
                        <el-button size="small" type="primary" icon="el-icon-delete" @click="cleartFn">清除条件</el-button>
                        <el-button size="small" type="primary" icon="el-icon-refresh" @click="refreshFn">刷新</el-button>
                    </el-button-group>
                    <span class="tishi">共搜索到 {{ total }} 条</span>
                </el-form-item>
            </el-form>
        </el-tabs>
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from 'vue'
import { useRouter } from "vue-router"
import useSearch from "../useSearch.ts";
export default defineComponent({
    name: 'GatewayForm',
    props: ['total', 'getData'],
    setup(props) {
        const Data = reactive({
            pageObj: {
                eui: '',
                online: 'all',
                agreement: 'all',
                date: []
            },
            dateArr:[],
            option: [
                { value: true, label: '在线' },
                { value: false, label: '离线' },
                { value: "all", label: '全部' }
            ],
        });
        const router = useRouter();
        const { dateStr } = useSearch(Data.pageObj, Data.dateArr, props.getData)
        // 获取数据的函数
        const getGatewayList = () => {
            var queryStr = { ...Data.pageObj };
            if (queryStr != "") {
                queryStr.date = dateStr.value;
            }
            props.getData(queryStr).then(res => {
                console.log(res);
                Data.tableData = res.data.data;
                Data.total = res.data.total;
            })
        }
        function Updata() {
            if (Data.dateArr != null && Data.dateArr.length == 2) {
                let time1 = Data.dateArr[0].getTime()
                let time2 = Data.dateArr[1].getTime()
                let timeStr = time1 + '-' + time2
                Data.pageObj.date = timeStr
            }
            props.getData(Data.pageObj)
        }
        return {
            ...toRefs(Data),
            ...useSearch(Data.pageObj, Data.dateArr, Updata)
        }
    }
});
</script>

<style lang="less" scoped>
.el-tabs {
    margin-bottom: 10px;
}

.el-form {
    width: 450px;
}

.tishi {
    margin-left: 5px;
    color: #ccc;
}
</style>